<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue2.js"></script>
    <style>
        .red {
            background-color: red;
        }

        .skyblue {
            background-color: skyblue;
        }

        img {
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<p>输出原始{{msg}}: {{ msg }}</p>   <!--未被绑定的元素，显示原本东西-->
<span id="a">
    <!--双大括号，除了变量，还可以放表达式-->
    Message: {{ msg }}-{{ masg }}<br>
    {{10 > 20 ? 'aaa' : 'bbb'}}<br>

    <!--通过使用 v-once 5.指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：-->
    <span v-once>这个只一次性插值，将不会改变: {{ msg }}</span>

    <!--为了输出真正的 HTML，你需要使用 v-html 5.指令：-->
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    <!-- v-bind: vue动态绑定属性，可简写成 : -->
    <div :class="backcolor1">切换背景色111</div>
    <div :class="backcolor2?'red':'skyblue'">切换背景色111</div>   <!--red和skyblue是字符串，需要加引号-->
    <img :src="changeImg" alt=""><br>

    <!-- v-on: vue动态绑定事件类型，可简写成 @ -->
    <button @click="handleChange()">change</button>


    <!-- v-show:动态隐藏和显示；v-if:动态创建和删除  (5.指令)-->
    <div v-show="isShow">我是动态隐藏和显示</div>
    <div v-if="isCreated">我是动态创建和删除</div>

    <!-- v-for:遍历，列表渲染 (5.指令)-->
    <ul>
        <li v-for="(item,index) in list">   <!--小括号内都是临时变量-->
            {{item}}-{{index}}
        </li>
    </ul>

</span>

<script>
    new Vue({
        el: '#a', //绑定元素
        data: {
            msg: '洪连最帅',
            masg: '洪连真无敌啊',
            rawHtml: '<span style="color: red">This is red</span>',
            backcolor1: 'red',
            backcolor2: 'true',
            changeImg: "/images/01.jpg",
            isShow: false,
            isCreated: false,
            list: ['aaa','bbb','ccc','ddd'],
        },
        //方法
        methods: {
            handleChange() {
                this.msg = "我变了";
                this.masg = "我真的变了";
                this.backcolor1 = 'skyblue';
                this.backcolor2 = !this.backcolor2;
                this.changeImg = "/images/02.jpg";
                this.isShow = !this.isShow;
                this.isCreated = !this.isCreated;
            }
        }
    })

    //拦截，一访问到obj.msg就会触发get(),一设置就会触发set(),并打印修改值
    let obj = {};
    let obox = document.getElementById('a');
    Object.defineProperty(obj, 'msg', {
        get() {
            console.log("get");
        },
        set(val) {
            console.log("set", val);
            obox.innerHTML = val;
        }
    });
</script>
</body>
</html>